<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>何为数据代理</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<img src="数据代理详解图.png" alt="数据代理详解图">
<script>
    /*
    *  1.Vue中的数据代理:
    *       通过vm对象来代理data对象中属性的操作（读/写）
    *  2.Vue中数据代理的好处:
    *       更加方便的操作data中的数据
    *  3.数据代理的实现原理:
    *       通过object.defineProperty()把data对象中所有属性添加到vm上。为每一个添加到vm上的属性，都指定一个getter/setter。在getter/setter内部去操作(读/写)data中对应的性。
    * */
    let obj = {x:100,y:300}
    let obj2 = {y:200}
    Object.defineProperty(obj2,"x",{
      get(){
        return obj.y;
      },
      set(value){
        obj.x = value;
      }
    })
    //这个打印出来就是300,这个体现了数据代理。整个过程其实是将obj.y赋值给obj2.x
    console.log(obj2.x)
    //这个打印出来就是原本的200
    console.log(obj2.y)

</script>

</body>
</html>